{% extends 'base.html' %}
{% block title %}Archives{% endblock %}

{% block content %}



<main class="container mx-auto px-4 py-8">

    
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
    <div class="col h-100 rounded-lg overflow-auto  bg-rose-400 p-4">
    <h1>日志</h1>
    <ul class="timeline">
        {% for article in article if article.category == '日志' %}
        <a href="{{ url_for('main.article_detail', article_id=article.id) }}">
            <li class="mb-2">
                <h2>{{ article.title }}</h2>
                <!-- <p>{{ article.content }}</p> -->
                <small>{{ article.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </li>            
        </a>

        {% endfor %}
    </ul>
    </div>
    <div class="col h-100 rounded-lg overflow-auto bg-rose-500 p-4">
    <h1>周刊</h1>
    <ul class="timeline">
        {% for article in article if article.category == '周刊' %}
        <a href="{{ url_for('main.article_detail', article_id=article.id) }}">
            <li class="mb-2">
                <h2>{{ article.title }}</h2>
                <!-- <p>{{ article.content }}</p> -->
                <small>{{ article.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </li>            
        </a>
        {% endfor %}
    </ul>
    </div>
    <div class="col h-100 rounded-lg overflow-auto bg-rose-600 p-4">
    <h1>月档案</h1>
    <ul class="timeline">
        {% for article in article if article.category == '月档案' %}
        <a href="{{ url_for('main.article_detail', article_id=article.id) }}">
            <li class="mb-2">
                <h2>{{ article.title }}</h2>
                <!-- <p>{{ article.content }}</p> -->
                <small>{{ article.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </li>            
        </a>
        {% endfor %}
    </ul>
    </div>
    <div class="col h-100 rounded-lg overflow-auto  bg-rose-700 p-4">
    <h1>年档案</h1>
    <ul class="timeline">
        {% for article in article if article.category == '年档案' %}
        <a href="{{ url_for('main.article_detail', article_id=article.id) }}">
            <li class="mb-2">
                <h2>{{ article.title }}</h2>
                <!-- <p>{{ article.content }}</p> -->
                <small>{{ article.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </li>            
        </a>
        {% endfor %}
    </ul>
    </div>
    <div class="col h-100 rounded-lg overflow-auto bg-rose-800 p-4">
    <h1>一五计划</h1>
    <ul class="timeline">
        {% for article in article if article.category == '一五计划' %}
        <a href="{{ url_for('main.article_detail', article_id=article.id) }}">
            <li class="mb-2">
                <h2>{{ article.title }}</h2>
                <!-- <p>{{ article.content }}</p> -->
                <small>{{ article.created_at.strftime('%Y-%m-%d %H:%M') }}</small>
            </li>            
        </a>
        {% endfor %}
    </ul>
    </div>
  </div>
</main>


</main>
<style>
    .markdown-body {
        font-family: Arial, sans-serif;
    }
/* 基本CSS文件 - 包含四级标题的样式 */

/* 一级标题样式 */
.col h1 {
    font-size: 25px; /* 字体大小 */
    font-family: 'Arial', sans-serif; /* 字体 */
    margin: 0 0 8px 0 ;
    text-align: center;
}

/* 二级标题样式 */
h2 {
/*    font-size: 30px; /* 字体大小 */*/
/*    font-family: 'Times New Roman', serif; /* 字体 */*/
}
</style>
{% endblock %}